實作網站1

2024 iThome 鐵人賽

Modern Web

16th鐵人賽

138 瀏覽

HTML5語意化標籤：
o 使用了宣告來啟用HTML5模式。
o 使用語意化標籤（如,,,），增強網頁結構的可讀性和可維護性，便於搜尋引擎和輔助工具（如螢幕閱讀器）理解內容，提升網站的無障礙性。
Bootstrap 框架：
o 使用了Bootstrap 5框架，它提供了強大的CSS樣式和JavaScript功能，無需自行撰寫大量樣式代碼。
o 響應式網格系統：透過Bootstrap的.container和row等類別來建立響應式佈局，使頁面在不同裝置上自動調整。
o 導航欄：使用navbar類別來建立響應式的導航欄，包括行動裝置的折疊功能，使其在小螢幕裝置上保持良好體驗。
o 按鈕樣式和字體大小：透過Bootstrap的內建樣式（如navbar-dark,bg-dark），讓網站更具一致性，提升開發效率。
自適應設計（Responsive Design）：
o 使用來設定視窗寬度，確保網站在不同螢幕尺寸上能正確顯示。
o 結合Bootstrap的響應式類別（如.col-md-4,.py-5）來控制佈局和間距，使頁面在桌機、平板、手機等裝置上都能保持一致的版面。
結構化的內容區塊：
o 透過不同的區塊，如「首頁」、「關於我們」、「活動和比賽」、「訓練課程」、「照片集」。
外部資源連結：
o 使用了CDN(Content Delivery Network)引入Bootstrap的CSS和 JavaScript 資源，這樣可以加快資源加載速度，同時確保最新的框架版本，減少維護負擔。